<template>
	<view class="pics">
		<view class="list">
			<view 
				v-for="(item, index) in list" 
				:key="index" 
				class="item">
				<image 
					@click="preview(index)" 
					:src="item.image" 
					lazy-load	
					class="item-image" 
					mode="aspectFill"></image>
				</view>
			</view>
			
			<empty :show="nodata" />
		
			<view v-if="list.length" class="loadmore">
				<u-loadmore :status="loadstatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import { getImageList } from '@/api/common'
	export default {
		data() {
			return {
				scrollTop: 0,
				
				skeletonLoading: true,
				loadstatus: 'loading',
				page: 1,
				pageSize: 10,
				nodata: false,
				list: [],
			}
		},
		onLoad() {
			this.getList(true)
		},
		onReachBottom() {
			if (this.loadstatus == 'nomore') return
			this.getList()
		},
		onPullDownRefresh() {
			this.getList(true)
		},
		methods: {
			getList(isOnce) {
				this.loadstatus = 'loading'
				if (isOnce) {
					this.page = 1
					this.nodata = false
					
					uni.showLoading({
						title: '数据加载中...',
					})
				}
				getImageList({
					page: this.page,
					pageNum: this.pageSize,
					type: ''
				}).then(res => {
					console.log(res)
					if (isOnce) {
						this.list = []
					}
					
					let list = res.data.length ? res.data : []
					this.list = [...this.list, ...list]
					this.loadstatus = list.length === res.total ? 'nomore' : 'loading'
					
					this.page++
					this.nodata = res.total === 0
				}).finally(() => {
					this.skeletonLoading = false
					uni.stopPullDownRefresh()
				})
			},
			preview(index) {
				let urls = this.list.map(item => item.image)
				uni.previewImage({
					current: index,
					urls,
					indicator: 'number',
					longPressActions: {
						success: function(data) {
							console.log(data)
						},
						fail: function(err) {
							console.log(err.errMsg)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.pics {
	padding: 30rpx 30rpx 0;
}
.list {
	display: flex;
	flex-wrap: wrap;
	margin-right: -30rpx;
	.item {
		display: flex;
		width: calc(50% - 30rpx);
		margin: 0 30rpx 30rpx 0;
		position: relative;
		&-image {
			width: 100%;
			height: 335rpx;
			border-radius: 8rpx;
		}
	}
}
.loadmore {
	padding: 0 0 30rpx;
}
</style>
